<template>
  <!-- 添加部门的对话框 -->
  <el-dialog
    :title="title"
    :visible="addShowDialog"
    @close="closeDialog"
  >
    <!-- 主体表单内容 -->
    <el-form ref="formRef" label-width="120px" :model="form" :rules="addDeptsRules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" :disabled="disabled" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
          <!-- value就是传递给后端的数据 label展示在页面中的
            将获取到的 负责人列表存储到data中, 循环创建 el-option  绑定label value
            value 这个接口设计的问题 传递名字  正常就是传id
           -->
          <el-option v-for="item in peopleList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <div slot="footer">
      <el-button type="primary" size="small" @click="addDepts">确定</el-button>
      <el-button size="small" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { reqGetSimplePeopleList } from '@/api/employees'
import { reqAddDepartments, reqGetDepartmentDetail, reqEditDepart } from '@/api/departments'
export default {
  props: {
    // 接收父组件传递过来控制对话框显示的布尔值
    addShowDialog: {
      type: Boolean,
      default: false
    },
    nodeData: {
      type: Object,
      required: true
    },
    depList: {
      type: Array,
      required: true
    }
  },
  data() {
    // 部门名称的自定义校验规则
    // value 校验的字符 就是输入框输入的值
    // cb  如果校验通过 cb() 如果校验失败 cb(new Error('校验失败的提示信息'))
    /* const checkNameRepeat = (rule, value, cb) => {
      console.log(value) // 输入框的值和当前部门的子部门进行部门名称匹配有重复 抛出错误对象
      // 如果nodeData没有children 手动给它加一个children为一个[]
      if (!this.nodeData.children) {
        this.nodeData.children = []
      }
      if (this.nodeData.children.length) {
        const boo = this.nodeData.children.some(item => item.name === value)
        console.log(boo)
        boo ? cb(new Error(`已经存在${value}部门`)) : cb()
      } else {
        // children没有长度直接校验通过
        cb()
      }
    } */

    const checkNameRepeat = (rule, value, cb) => {
      // console.log(value)
      // console.log(this.depList)
      // console.log(this.nodeData.id)
      // 允许编辑部门名称和自己重复
      if (this.form.id && this.nodeData.name === value) {
        // 如果form中code和 输入框的值一样 而且是处于编辑状态  直接校验通过
        cb()
        return
      }
      // 编辑状态如果修改一级部门的部门名称, 不会进行兄弟部门的校验 找兄弟是否重复
      let arr = []
      if (this.form.id) {
        //  编辑状态
        arr = this.depList.filter(item => item.pid === this.nodeData.pid)
      } else {
        // 新增状态
        arr = this.depList.filter(item => item.pid === this.nodeData.id)
      }
      // 找孩子部门校验名称是否重复
      // 1. 将所有的部门列表传递过来 (原始数据)  16条
      // 2. nodeData有自己的id 如果有子部门  子部门的pid 和 当前部门的id是一样的 过滤出来一个数组(这个数组就是当前部门下所有子部门)

      // 3. 检测是否有重复
      const boo = arr.some(item => item.name === value)
      boo ? cb(new Error(`已经存在${value}部门`)) : cb()
    }

    //  部门编码的自定义校验规则
    const checkCodeRepeat = (rule, value, cb) => {
      // 如果是新增部门,这个code一定要校验是否重复,但是编辑状态用户有可能不修改部门编码.
      if (this.form.id && this.nodeData.code === value) {
        // 如果form中code和 输入框的值一样 而且是处于编辑状态  直接校验通过
        cb()
        return
      }
      // 遍历所有原始数据, 拿到对应的每一条数据的code  判断和value是否重复
      const boo = this.depList.some(item => item.code === value)
      boo ? cb(new Error(`已经存在${value}部门编码`)) : cb()
    }
    return {
      // 添加部门的表单
      form: {
        name: '', // 部门名称
        code: '', // 部门的编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      },
      // 添加部门的表单的校验规则 一定记得给el-from-item添加prop属性
      addDeptsRules: {
        // 部门名称的校验
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['change', 'blur'] },
          { min: 2, max: 50, message: '部门名称为2-50个字符', trigger: ['change', 'blur'] },
          // 自定义部门名称的校验规则 同级部门中禁止出现重复的部门
          { validator: checkNameRepeat, trigger: 'blur' }
        ],
        // 部门编码的校验
        code: [
          { required: true, message: '部门名称不能为空', trigger: ['change', 'blur'] },
          { min: 1, max: 50, message: '部门名称不能超过50个字符', trigger: ['change', 'blur'] },
          // 自定义部门编码的校验规则 校验所有部门编码不允许重复
          { validator: checkCodeRepeat, trigger: 'blur' }
        ],
        // 部门负责人校验
        manager: [
          { required: true, message: '请选择部门负责人', trigger: 'change' }
        ],
        // 部门介绍校验
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['change', 'blur'] },
          { min: 1, max: 300, message: '部门介绍不能超过300个字符', trigger: ['change', 'blur'] }
        ]
      },
      peopleList: [] // 下拉列表的数据
      // title: ''
    }
  },
  computed: {
    title() {
      // if (this.form.id) {
      //   return '编辑部门'
      // } else {
      //   return '添加部门'
      // }
      // 通过计算属性判断form中的id字段, 有id说明是编辑状态, 没有id添加状态
      return this.form.id ? '编辑部门' : '添加部门'
      // 计算属性的形式上是一个函数, 本质是一个属性 必须有返回值,基于data中的数据进行计算的,只要数据发生变化,会重新计算
    },
    // 是否禁用部门编码的计算属性
    disabled() {
      // if (this.form.id) {
      //   return true
      // } else {
      //   return false
      // }
      // return this.form.id ? true : false
      return !!this.form.id
    }
  },
  /* created() {
    // 就会直接获取到数据, 对话框会创建,只不过会隐藏掉
    this.getSimplePeopleList()
  }, */
  methods: {
    // 点击x关闭对话框组件
    closeDialog() {
      // 通知父组件将对话框布尔值改为false
      // this.$emit('close-dialog')
      this.$emit('update:addShowDialog', false)
      // 在关闭之前重置form对象
      this.form = {
        name: '', // 部门名称
        code: '', // 部门的编码
        manager: '', // 部门负责人
        introduce: '' // 部门介绍
      }
      // 在对话框关闭的时候重置对话框(值和校验规则)
      this.$refs.formRef.resetFields()
    },
    // 获取下拉列表数据的方法
    async getSimplePeopleList() {
      const { data } = await reqGetSimplePeopleList()
      // console.log(res)
      // 存储员工列表
      this.peopleList = data
    },
    // 添加/编辑部门
    addDepts() {
      // 首先对所有表单项进行预校验 validate 参数会得到一个布尔值, 布尔值为true表示所有的校验通过,才可以发请求
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          // nodeData 中就是点击部门的对象 id就是新增的父级的id(pid参数) pid是点击的父级部门的id
          if (this.form.id) {
            //  编辑部门
            // console.log('编辑部门提交')
            const { message } = await reqEditDepart(this.form)
            this.$message.success(message)
          } else {
            //  添加部门
            // 1. 发送请求
            const { message } = await reqAddDepartments({ ...this.form, pid: this.nodeData.id })
            // console.log(res)
            // 2.提示用户
            this.$message.success(message)
          }
          // 3.关闭对话框
          this.closeDialog()
          // 4.通知父组件重新获取数据
          this.$emit('add-depts')
        }
      })
    },
    // 获取部门详情
    async getDepartDetail(id) {
      const res = await reqGetDepartmentDetail(id)
      // console.log(res)
      // 将部门详情信息赋值给form,直接实现数据回显了
      this.form = res.data
    }
  }
}
</script>

<style>

</style>
